<template>
    <!-- 横向柱形 -->
    <!-- 用户信息泄露分析 -->
    <div class="chart-container" ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: '',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        let that = this;
        setTimeout(function () {
            that.initChart();
        }, 0)
    },

    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartRef);
            // 柱状图的宽度，y是x的一半
            var yData = [
                "无风险",
                "个人爱好",
                "履历信息",
                "设备信息",
                "社交关系",
                "行动轨迹",
                "身份信息",
            ];
            var data = ['2000', '1800', '1600', '1000', '800', '600', '400'];
            data.sort((a, b) => b - a);
            var max = Math.max.apply(null, data);
            var getMax = [];
            for (let i = 0; i < yData.length; i++) {
                getMax.push(max);
            }

            let option = {
                // backgroundColor: '#0b1751',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                    },
                    formatter: function (params) {
                        return params[0].name + '泄露: ' + params[0].value;
                    },
                },
                xAxis: {
                    show: false,
                    type: 'value',
                },
                grid: {
                    right: '15%',
                    left: '35%',
                    top: '4%',
                    bottom: '1%',
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        offset: 120,
                        axisLabel: {
                            show: true,
                            align: 'left',
                            textStyle: {
                                color: '#fff',
                                fontSize: '17',
                            },
                            formatter: function (value, index) {
                                var num = '';
                                var str = '';
                                num = index + 1;
                                if (index === 0) {
                                    str = '{no1|' + '} {num1|' + num + '} {title1| ' + value + '}';
                                } else if (index === 1) {
                                    str = '{no2|' + '} {num2|' + num + '} {title2| ' + value + '}';
                                } else if (index === 2) {
                                    str = '{no3|' + '} {num3|' + num + '} {title3| ' + value + '}';
                                } else {
                                    str = ' {num|' + num + '} {title| ' + value + '}';
                                }
                                return str;
                            },
                            rich: {
                                num: {
                                    color: '#fff',
                                    backgroundColor: '#112b67',
                                    width: 10,
                                    height: 10,
                                    fontSize: 14,
                                    padding: [2, 5, 3, 5],
                                    align: 'center',
                                    shadowColor: '#3374ba',
                                    borderColor: '#3374ba',
                                    borderWidth: 1,
                                },
                                num1: {
                                    color: '#fff',
                                    backgroundColor: '#112b67',
                                    width: 10,
                                    height: 10,
                                    fontSize: 14,
                                    padding: [2, 5, 3, 5],
                                    align: 'center',
                                    shadowColor: '#4db2ff',
                                    borderColor: '#4db2ff',
                                    borderWidth: 1,
                                },
                                num2: {
                                    color: '#fff',
                                    backgroundColor: '#112b67',
                                    width: 10,
                                    height: 10,
                                    fontSize: 14,
                                    padding: [2, 5, 3, 5],
                                    align: 'center',
                                    shadowColor: '#4db2ff',
                                    borderColor: '#4db2ff',
                                    borderWidth: 1,
                                },
                                num3: {
                                    color: '#fff',
                                    backgroundColor: '#112b67',
                                    width: 10,
                                    height: 10,
                                    fontSize: 14,
                                    padding: [2, 5, 3, 5],
                                    align: 'center',
                                    shadowColor: '#4db2ff',
                                    borderColor: '#4db2ff',
                                    borderWidth: 1,
                                },
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        data: yData,
                    },
                    {
                        type: 'category',
                        inverse: true,
                        offset: 0,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '14',
                            },
                        },
                        data: data,
                    },
                ],
                series: [
                    {
                        name: '值',
                        type: 'bar',
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                // barBorderRadius: 30,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(14,95,255,0)', //  100%  处的颜色

                                        },
                                        {
                                            offset: 1,
                                            color: '#2DE1FD', //  0%  处的颜色background: linear-gradient( 270deg, #2DE1FD 0%, rgba(14,95,255,0) 100%);

                                        },
                                    ],
                                    global: false, //  缺省为  false
                                },
                            },
                        },
                        barWidth: 20,
                        data: data,
                    },
                    {
                        name: '背景',
                        type: 'bar',
                        barWidth: 20,
                        barGap: '-100%',
                        data: getMax,
                        itemStyle: {
                            color: '#152448',
                            // barBorderRadius: 30,
                        },
                    },
                ],
            };

            this.chart.setOption(option);

            // 监听窗口大小变化，用于自适应  
        },
    }
};  
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 100%;
    /* background-color: #817979; */
}
</style>